<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Standing cool</title>
    <link rel="stylesheet" href="Standing cool.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1874480_nbc8wc8ygc8.css">
 
</head>
<body>
    <!-- 整个页面框架 -->
    <div class="bottom">
        <!-- 头部导航栏 -->
        <header class="navigation_bar">
       <div class="nav">
           <div class="logo">
               <img  class="logos"src="https://static.zcool.cn/git_z/z/common/images/svg/logo.svg" alt="">
           </div>
           <div class="navigation">
               <ul class="list">
                   <li><a href="">首页</a></li>
                   <li><a href="">发现</a>
                <div class="hide"> 
                 <ul class="hide_ul">
                     <li>平面</li>
                     <li class="hide_ul_li">|</li>
                     <li>UI</li>
                     <li class="hide_ul_li">|</li>
                     <li>网页</li>
                     <li class="hide_ul_li">|</li>
                     <li>插画</li>
                     <li class="hide_ul_li">|</li>
                     <li>动漫</li>
                     <li class="hide_ul_li">|</li>
                     <li>摄影</li>
                     <li class="hide_ul_li">|</li>
                     <li>空间</li><br>
                     <li class="hide_ul_li_font">工业/产品</li>
                     <li class="hide_ul_li">|</li>
                     <li>三维</li>
                     <li class="hide_ul_li">|</li>
                     <li>影视</li>
                     <li class="hide_ul_li">|</li>
                     <li>手工艺</li>
                     <li class="hide_ul_li">|</li>
                     <li>纯艺术</li>
                     <li class="hide_ul_li">|</li>
                     <li>服装</li>
                     <li class="hide_ul_li">|</li>
                     <li>其他</li><br>
                     <li class="hide_ul_li_Line"></li><br>
                     <li class="hide_ul_li_a"><a href="">精选作品></a></li>
                     <li class="hide_ul_li_a"><a href="">精选文章></a></li>
                     <li class="hide_ul_li_a"><a href="">精选收藏></a></li>
                 </ul>
                </div> 
                </li>
                   <li class="position"><a href="">职位</a>
                    <div class="drop_down_menu">
                        <dl class="content">
                            <dt>职位</dt>
                            <dt>工司</dt>
                            <dt>+发布职位</dt>
                        </dl>
                    </div>
                </li>
                   <li class="position"><a href="">活动</a>
                    <div class="drop_down_menu">
                        <dl class="content">
                            <dt>设计大赛</dt>
                            <dt>专题策划</dt>
                            <dt>线上活动</dt>
                            <dt>线下活动</dt>
                            <dt>学习音频</dt>
                        </dl>
                    </div></li>
                   <li class="position"><a href="">正版素材</a>
                    <div class="drop_down_menu">
                        <dl class="content">
                            <dt>图片</dt>
                            <dt>视频</dt>
                            <dt>字体</dt>
                            <dt>音乐</dt>
                            <dt>我要供图</dt>
                        </dl>
                    </div></li>
                   <li class="position"><a href="">课程</a>
                    <div class="drop_down_menu">
                        <dl class="content">
                            <dt>免费直播周周见</dt>
                            <dt>正在热销</dt>
                            <dt>口碑好课</dt>
                        </dl>
                    </div></li>
                   <li class="position"><a href="">版权保护</a>
                    <div class="drop_down_menu">
                        <dl class="content">
                            <dt>区块链存证</dt>
                            <dt>作品登记证书</dt>
                            <dt>维权服务</dt>
                        </dl>
                    </div></li>
                   <li class="position"><a href="">&#8226 &#8226 &#8226</a>
                    <div class="drop_down_menu">
                        <dl class="content">
                            <dt>设计师</dt>
                            <dt>榜单</dt>
                            <dt>站酷App</dt>
                            <dt>站酷字库</dt>
                        </dl>
                    </div></li>
               </ul>
               <div class="search">
                <span class="iconfont icon-search"></span>
                 </div>
                 <div class="download">
                    <span class="iconfont icon-yun"></span>
                     </div>  
           </div>
           <ul class="sign">
            <li><a href="">登录</a></li>
            <li>|</li>
            <li><a href="">注册</a></li>
        </ul>
       </div>
        </header>
        <div id="container">
            <a id="prev_btn">&#60</a>
            <a id="next_btn">&#62</a>
            <ul id="banner_container">
                <li><img src="https://img.zcool.cn/community/018b805f082088a801206621aef87e.jpg@1380w" alt=""></li>
                <li><img src="https://img.zcool.cn/community/01eb1f5f080d13a8012066217b4c3e.png@1380w" alt=""></li>
                <li><img src="https://img.zcool.cn/community/01fb4c5f080d5fa80120662145f89d.png@1380w" alt=""></li>
                <li><img src="https://img.zcool.cn/community/014f055f080ec9a8012066216e2d66.png@1380w" alt=""></li>
                <li><img src="https://img.zcool.cn/community/0101fd5f080f0ba801215aa07720fb.png@1380w" alt=""></li>
                <li><img src="https://img.zcool.cn/community/01aa7a5f07cf79a801215aa0904370.jpg@1380w" alt=""></li>
            </ul>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            // 1. 通过点击按钮控制 index 改变;
            // 2. 根据index改变去计算 banner_container 元素的left值;
            function Banner(){
                // 获取文档中的元素
                this.index=0;
                // this.autoPlay();
                // 显示当前的图片索引
                this.banner_container=document.querySelector("#banner_container");
                // 总的dom对象
                this.slides=document.querySelectorAll("#banner_container li");
                this.prev_btn = document.querySelector("#prev_btn");
                this.next_btn = document.querySelector("#next_btn");
                this.container = document.querySelector("#container");
                this.bindEvent();
                this.autoPlay();
            }
            Banner.prototype.bindEvent = function(){
                // 绑定事件
                var self = this;
                var max_index=self.slides.length-1;
                self.prev_btn.onclick = function(){
                    // 设置点击事件
                    if(self.index === 0){
                        self.banner_container.style.left = -max_index*1380+"px";
                        self.index=max_index-1;
                    }else{
                        self.index --;
                        // 下标
                    }
                    self.changeSlide();
                    // 切换图片
                }
                self.next_btn.onclick = function(){
                    // 绑定点击事件
                    if(self.index === max_index){
                        self.banner_container.style.left = 0;
                        self.index = 1;
                    }else{
                        self.index ++;
                        // 下标
                    }
                    self.changeSlide();
                }
            }
            // 图片自动切换
            Banner.prototype.changeSlide = function(){
                // 切换图片
                // this.slide_container.style.left = -this.index * 1380 + "px"
    
                $(this.banner_container)
                .stop()
                .animate({
                    left : -this.index * 1380
                },1000)
            }
            Banner.prototype.autoPlay=function(){
                var self=this;
                var t=setInterval(function(){
                    self.next_btn.onclick();
                },1000)
                     // 鼠标移入的时候图片暂停自动播放
                this.container.onmouseover=function(){
                    clearInterval(t);
                }
                this.container.onmouseout=function(){
                    clearInterval(t);
                    t=setInterval(function(){
                        self.next_btn.onclick();
                    },1000)
                }
            }
          var bann= new Banner();
        </script>
 <div class="Tabular_chart">
 <dl class="Tabular_chart_dl">
     <dd><img src="https://reviveimg.hellorf.com/www/images/1cef230ec4dc524e44104f98250b26ee.jpg" alt=""></dd>
     <dd><img src="https://reviveimg.hellorf.com/www/images/8adf90f1b7bc6cb211f74d7bb1249377.jpeg" alt=""></dd>
     <dd><img src="https://reviveimg.hellorf.com/www/images/63cd0b640f352cb678d38984fa2b7f0a.jpg" alt=""></dd>
     <dd><img src="https://reviveimg.hellorf.com/www/images/ff07ba28f990592ebaf90bc1744eccaf.jpg" alt=""></dd>
     <dd><img src="https://reviveimg.hellorf.com/www/images/5f573d18477f4638feddae4435534a70.jpg" alt=""></dd>
 </dl>
   <dl class="text">
       <dd>首页推荐</dd>
       <dd>最新发布</dd>
   </dl>
</div>
<div class="Detailed_drawing">
<div class="Small_picture">
<!-- <div class="Small_picture_img">
    <img src="https://img.zcool.cn/community/01c3f55f083872a8012066215e1a7d.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
</div>
<div class="li_font">
<p>山间土【裱白】系列茶礼</p>
<p>平面-包装</p>
<dl class="feedback">
    <dt class="iconfont icon-yanjing">7742</dt>
    <dt class="iconfont icon-liaotian">22</dt>
    <dt class="iconfont icon-dianzan1">262</dt>
</dl>
</div>
<div class="address">
    <dl>
       <dt><img src="https://img.zcool.cn/community/01d0c15f06fbbaa801215aa0ba5cd2.jpg@80w_80h_1c_1e_1o_100sh.jpg" alt=""></dt>
      <dt>深圳花田土</dt>
      <dt>24小时前</dt>
    </dl>

</div> -->
</div>
</div>
<div class="paging">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>&#8226 &#8226 &#8226</li>
        <li>99</li>
        <li>100</li>
        <li>></li>
    </ul>
</div>
<div class="Long_graph">
    <img src="https://reviveimg.hellorf.com/www/images/9901b531071d04f2566f4455835dbec5.jpg" alt="">
</div>
<div class="replace">
<span>推荐课程</span>
<span>换一换</span>
</div>
<div class="Base_map">
    <div class="Base_map_img">
        <img src="https://image.gogoup.com/course/20190930/1569810191659.jpg" alt="">
        <p>跟着何超清学达芬奇</p>
    </div>
    <div class="Base_map_img">
        <img src="https://image.gogoup.com/course/20180822/1534911512210.jpg" alt="">
        <p>跟着何超清学达芬奇</p>
    </div>
    <div class="Base_map_img">
        <img src="https://image.gogoup.com/course/20200420/1587368029139.png" alt="">
        <p>跟着何超清学达芬奇</p>
    </div>
    <div class="Base_map_img">
        <img src="https://image.gogoup.com/course/20191024/1571897826560.gif" alt="">
        <p>跟着何超清学达芬奇</p>
    </div>
    <div class="Base_map_img">
        <img src="https://image.gogoup.com/course/20200327/1585293561831.jpg" alt="">
        <p>跟着何超清学达芬奇</p>
    </div>
</div>
<div class="lost">
    <div class="content">
        <ul>
            <li><span class="iconfont icon-shouji"><span>移动版</li>
            <li>关于我们</li>
            <li>用户协议</li>
            <li>隐私政策</li>
            <li>侵权申诉</li>
            <li>企业服务</li>
            <li>帮助中心</li>
            <li>联系我们</li>
            <li>中文</li>
            <li>Eglish</li>
            <li class="iconfont icon-weixin"></li>
            <li class="iconfont icon-weibo"></li>
        </ul>
        <p></p>
        <div class="information">
            <ul>
                <li class="iconfont icon-gongan">京公网安备11010502000501号</li>
                <li>|</li>
                <li>广播电视节目制作经营许可证（京）字第06990号</li>
                <li>|</li>
                <li>京ICP备11017824号</li>
                <li>|</li>
                <li>京ICP证130164号</li><br>
                <li>营业执照</li>
                <li>|</li>
                <li>网上有害信息举报专区</li>
                <li>|</li>
                <li>不良信息举报电话：010-56538658</li>
                <li>|</li>
                <li>举报邮箱  jubao@zcool.com.cn</li>
                <li>|</li>
                <li>联系电话：010-56538600</li>
                <li>Copyright © 2006-2020 ZCOOL站酷</li>
            </ul>
        </div>
    </div>

</div>
</body>
<script src="Rendering.js"></script>
</html>